<template>
	<!-- 编辑/新增地址 -->
	<view class="container">
		<!-- 页面导航栏 -->
		<page-navbar :title="isEdit ? '编辑地址' : '新增地址'"></page-navbar>

		<!-- 地址表单 -->
		<view class="address-form">
			<!-- 收货人信息 -->
			<view class="form-section">
				<view class="section-title">
					<text class="title-text">收货人信息</text>
				</view>

				<view class="form-item">
					<text class="form-label">收货人姓名</text>
					<input class="form-input" v-model="addressForm.name" placeholder="请输入收货人姓名" maxlength="20"
						:focus="false" confirm-type="next" />
				</view>

				<view class="form-item">
					<text class="form-label">手机号码</text>
					<input class="form-input" v-model="addressForm.phone" placeholder="请输入手机号码" type="number"
						maxlength="11" :focus="false" confirm-type="next" />
				</view>
			</view>

			<!-- 收货地址 -->
			<view class="form-section">
				<view class="section-title">
					<text class="title-text">收货地址</text>
				</view>

				<view class="form-item">
					<text class="form-label">省份</text>
					<input class="form-input" v-model="addressForm.province" placeholder="请输入省份" maxlength="20"
						:focus="false" confirm-type="next" />
				</view>

				<view class="form-item">
					<text class="form-label">城市</text>
					<input class="form-input" v-model="addressForm.city" placeholder="请输入城市" maxlength="20"
						:focus="false" confirm-type="next" />
				</view>

				<view class="form-item">
					<text class="form-label">区/县</text>
					<input class="form-input" v-model="addressForm.district" placeholder="请输入区/县" maxlength="20"
						:focus="false" confirm-type="next" />
				</view>

				<view class="form-item">
					<text class="form-label">详细地址</text>
					<textarea class="form-textarea" v-model="addressForm.address" placeholder="请输入详细地址（街道、门牌号等）"
						maxlength="100" :focus="false" confirm-type="done" />
				</view>
			</view>

			<!-- 其他设置 -->
			<view class="form-section">
				<view class="form-item switch-item">
					<text class="form-label">设为默认地址</text>
					<switch :checked="addressForm.is_default === 2" @change="onDefaultChange" color="#56ab2f" />
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom-bar">
			<view class="save-btn" @click="saveAddress">
				<text class="save-text">{{ isEdit ? '保存修改' : '保存地址' }}</text>
			</view>
		</view>


	</view>
</template>

<script setup>
import { ref, reactive, onMounted, computed, watch } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import PageNavbar from '@/components/page-navbar/page-navbar.vue';
import api from "@/api"

// 页面参数
const pageParams = ref({});
const isEdit = ref(false);
const addressId = ref('');

// 地址表单数据
const addressForm = reactive({
	name: '',
	phone: '',
	province: '',
	city: '',
	district: '',
	address: '',
	is_default: 1 // 1-非默认 2-默认
});



onLoad((options) => {
	pageParams.value = options || {};
	if (options.id) {
		isEdit.value = true;
		addressId.value = options.id;
		getList();
	}
});

onMounted(() => {

});

// 获取地址详情
const getList = () => {
	api.commerceApi.addressList({ id: addressId.value, loding: true }).then(res => {
		let data = res.list.find(item => item.id == addressId.value);
		Object.assign(addressForm, data);
		console.log("地址详情", addressForm, data);

	})
};

// 默认地址切换
const onDefaultChange = (e) => {
	addressForm.is_default = e.detail.value ? 2 : 1;
};

// 表单验证
const validateForm = () => {
	if (!addressForm.name.trim()) {
		uni.showToast({
			title: '请输入收货人姓名',
			icon: 'none'
		});
		return false;
	}

	if (!addressForm.phone.trim()) {
		uni.showToast({
			title: '请输入手机号码',
			icon: 'none'
		});
		return false;
	}

	// 手机号格式验证
	const phoneRegex = /^1[3-9]\d{9}$/;
	if (!phoneRegex.test(addressForm.phone)) {
		uni.showToast({
			title: '请输入正确的手机号码',
			icon: 'none'
		});
		return false;
	}

	if (!addressForm.province.trim()) {
		uni.showToast({
			title: '请输入省份',
			icon: 'none'
		});
		return false;
	}

	if (!addressForm.city.trim()) {
		uni.showToast({
			title: '请输入城市',
			icon: 'none'
		});
		return false;
	}

	if (!addressForm.district.trim()) {
		uni.showToast({
			title: '请输入区/县',
			icon: 'none'
		});
		return false;
	}

	if (!addressForm.address.trim()) {
		uni.showToast({
			title: '请输入详细地址',
			icon: 'none'
		});
		return false;
	}

	return true;
};

// 保存地址
const saveAddress = () => {
	if (!validateForm()) {
		return;
	}

	const saveData = { ...addressForm };
	if (isEdit.value) {
		{
			api.commerceApi.setupAddress(saveData).then(res => {
				uni.showToast({
					title: '保存成功',
					icon: 'success'
				});
				uni.navigateBack();
			})
		}
	} else {
		api.commerceApi.addAddress(saveData).then(res => {
			uni.showToast({
				title: '保存成功',
				icon: 'success'
			});
			setTimeout(() => {
				uni.navigateBack();
			}, 1000);
		})
	}

};

</script>

<style lang="scss" scoped>
.container {
	background: linear-gradient(180deg, #f8fffe 0%, #f2f8f4 100%);
	min-height: 100vh;
	width: 100vw;
	padding-bottom: 140rpx;
}

.address-form {
	padding: 24rpx;

	.form-section {
		background: white;
		border-radius: 20rpx;
		margin-bottom: 24rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
		border: 1rpx solid rgba(86, 171, 47, 0.1);

		.section-title {
			padding: 30rpx 30rpx 20rpx;
			border-bottom: 1rpx solid #f0f0f0;
			background: linear-gradient(135deg, rgba(86, 171, 47, 0.03), rgba(168, 230, 207, 0.03));

			.title-text {
				font-size: 30rpx;
				font-weight: 600;
				color: #333;
				position: relative;
				padding-left: 20rpx;

				&::before {
					content: '';
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 8rpx;
					height: 24rpx;
					background: linear-gradient(135deg, #56ab2f, #a8e6cf);
					border-radius: 4rpx;
				}
			}
		}

		.form-item {
			padding: 30rpx;
			border-bottom: 1rpx solid #f0f0f0;

			&:last-child {
				border-bottom: none;
			}

			.form-label {
				display: block;
				font-size: 28rpx;
				color: #333;
				margin-bottom: 20rpx;
				font-weight: 500;
				position: relative;

				&::before {
					content: '';
					position: absolute;
					left: -15rpx;
					top: 50%;
					transform: translateY(-50%);
					width: 6rpx;
					height: 20rpx;
					background: linear-gradient(135deg, #56ab2f, #a8e6cf);
					border-radius: 3rpx;
				}
			}

			.form-input {
				width: 100%;
				padding: 12rpx 30rpx;
				height: 64rpx;
				border: 2rpx solid #e8e8e8;
				border-radius: 12rpx;
				font-size: 28rpx;
				color: #333;
				background: #fafafa;
				transition: all 0.3s ease;
				box-sizing: border-box;
				outline: none;
				-webkit-appearance: none;
				appearance: none;
				box-sizing: border-box;

				&:focus {
					border-color: #56ab2f !important;
					background: #fff !important;
					box-shadow: 0 0 0 4rpx rgba(86, 171, 47, 0.1) !important;
				}

				&::placeholder {
					color: #999;
				}
			}

			.form-textarea {
				width: 100%;
				padding: 24rpx 30rpx;
				border: 2rpx solid #e8e8e8;
				border-radius: 12rpx;
				font-size: 28rpx;
				color: #333;
				background: #fafafa;
				min-height: 160rpx;
				resize: none;
				transition: all 0.3s ease;
				box-sizing: border-box;
				line-height: 1.5;
				outline: none;
				-webkit-appearance: none;
				appearance: none;

				&:focus {
					border-color: #56ab2f !important;
					background: #fff !important;
					box-shadow: 0 0 0 4rpx rgba(86, 171, 47, 0.1) !important;
				}

				&::placeholder {
					color: #999;
				}
			}



			&.switch-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: linear-gradient(135deg, rgba(86, 171, 47, 0.05), rgba(168, 230, 207, 0.05));
				border-radius: 12rpx;
				margin: 20rpx 0;

				.form-label {
					margin-bottom: 0;
					color: #56ab2f;
					font-weight: 600;

					&::before {
						background: linear-gradient(135deg, #56ab2f, #a8e6cf);
					}
				}
			}
		}
	}
}

.bottom-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 1));
	padding: 24rpx 30rpx 30rpx;
	box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.12);
	z-index: 999;
	backdrop-filter: blur(10rpx);

	.save-btn {
		background: linear-gradient(135deg, #56ab2f, #a8e6cf);
		color: white;
		padding: 28rpx;
		border-radius: 50rpx;
		text-align: center;
		box-shadow: 0 8rpx 24rpx rgba(86, 171, 47, 0.4);
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: -100%;
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
			transition: left 0.6s;
		}

		&:active {
			transform: translateY(2rpx);
			box-shadow: 0 4rpx 16rpx rgba(86, 171, 47, 0.3);

			&::before {
				left: 100%;
			}
		}

		.save-text {
			font-size: 30rpx;
			font-weight: 600;
			letter-spacing: 1rpx;
		}
	}
}
</style>
